<template>
  <div class="footer">
      <div class="contain">
        <div class="list">
          <ul>
            <li>
              <div class="about">
                <div class="tit">浙江碟普信息科技股份有限公司</div>
                <div class="tip">Add_杭州市江干区五星路民生金融中心11-15楼</div>
              </div>
            </li>
            <li>
              <dl>
                <dt>网站导航</dt>
                <dd class="nav">
                  <a><router-link to="/">首页</router-link></a>
                  <a class="narrow"><router-link to="/service">产品服务</router-link></a>
                  <a><router-link to="/joinus">招商加盟</router-link></a>
                  <a class="narrow"><router-link to="/newcenter">媒体中心</router-link></a>
                  <a><router-link to="/aboutus">关于我们</router-link></a>
                </dd>
              </dl>
            </li>
            <li>
              <dl>
                <dt>服务电话</dt>
                <dd>
                  <div class="tel">0571-28297700</div>
                  <div class="tip">工作时间：09:00-17:30</div>
                </dd>
              </dl>
            </li>
          </ul>
        </div>
        <ul class="qrcode">
          <li>
            <div class="icon icon-app"></div>
            <div class="txt">稻普控股集团</div>
          </li>
          <li>
            <div class="icon icon-wechat"></div>
            <div class="txt">微信公众号</div>
          </li>
        </ul>
      </div>
      <div class="footer-nav">
          <div class="copy">©版权所有 Copyright©2014-2017 浙江稻普控股集团 浙ICP备14041345号</div>
      </div>
  </div>

</template>

<script>
  export default {
    data(){
      return {
        active:true
      }
    }
  }
</script>
<style scoped>
  .contain {
    zoom: 1;
    width: 1200px;
    position: relative;
    margin: auto;
    height: 150px;
  }
  .footer {
    width: 100%;
    min-width: 1200px;
    background-color: #333440;
    height: 220px;
    padding-top: 35px;
    overflow: hidden;
    clear: both;
  }

  .footer .list {
    width: 900px;
    overflow: hidden;
    float: left
  }

  .footer .list .add {
    margin-left: 107px;
    float: left;
    font-size: 12px;
    color: #a2a3a9;
    margin-top: 10px
  }

  .footer .list li {
    float: left
  }

  .footer .list li:before {
    display: block;
    content: '';
    width: 1px;
    height: 82px;
    background-color: #43444f;
    margin: 0 40px;
    float: right
  }

  .footer .list li:last-child:before {
    display: none
  }

  .footer .list li .logo {
    width: 86px;
    height: 83px;
    float: left;
  }

  .footer .list li .about {
    float: left;
    padding-left: 24px;
    width: 260px
  }

  .footer .list li .about .tit,.footer .list li dl dt {
    line-height: 24px;
    margin-bottom: 5px;
    font-size: 14px;
    color: #cdcedb
  }

  .footer .list li .about .tip {
    font-size: 12px;
    line-height: 18px;
    color: #a2a3a9
  }

  .footer .list li dl {
    float: left
  }

  .footer .list li dl dd {
    overflow: hidden
  }

  .footer .list li dl dd.nav {
    width: 150px
  }

  .footer .list li dl dd a {
    display: block;
    float: left;
    font-size: 12px;
    width: 90px;
    line-height: 18px;
    color: #a2a3a9
  }

  .footer .list li dl dd a.narrow {
    width: 60px
  }

  .footer .list li dl dd .tel {
    font-size: 24px;
    line-height: 32px;
    margin-bottom: 4px;
    color: #cdcedb;
    font-weight: 700
  }

  .footer .list li dl dd .tip {
    font-size: 12px;
    line-height: 18px;
    color: #a2a3a9
  }

  .footer .qrcode {
    width: 300px;
    overflow: hidden;
    float: right
  }

  .footer .qrcode li {
    width: 150px;
    float: left
  }

  .footer .qrcode li .icon {
    width: 80px;
    height: 80px;
    margin: auto;
  }

  .footer .qrcode li .icon-app {
    background-position: 0 0px
  }

  .footer .qrcode li .icon-wechat {
    background-position: 0 0px
  }

  .footer .qrcode li .txt {
    text-align: center;
    font-size: 12px;
    line-height: 14px;
    padding: 8px 0;
    color: #cdcedb
  }

  .footer-nav {
    clear: both;
    width: 100%;
    min-width: 1200px;
    height: 40px;
    line-height: 40px;
    background-color: #141417
  }

  .footer-nav .copy {
    font-size: 12px;
    text-align: center;
    color: #76767e
  }

  .footer .qrcode li .icon {
    width: 100px;
    height: 100px;
    margin: auto;
    background: url(../assets/icon.png) no-repeat;
}
</style>
